<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		var option = {  //指定图表的配置项和数据
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: { text: '产品销量产量利润统计', left: 70, top: 9 },
			xAxis: {  //配置x轴坐标系
				data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
			},
			yAxis: {},  //配置y轴坐标系
			tooltip: {  //配置提示框组件
				trigger: 'item', show: true,
				formatter: "{a} <br/>{b} : {c}"
			},
			legend: {},
			series: [  //配置数据系列
				{   //设置数据系列1：销量
					name: '销量', type: 'bar',
					data: [5, 28, 16, 20, 15, 33]
				},
				{   //设置数据系列2：产量
					name: '产量', type: 'bar',
					data: [15, 38, 20, 24, 20, 45]
				},
				{   //设置数据系列3：利润
					name: '利润', type: 'bar',
					data: [25, 15, 10, 10, 15, 22]
				}
			]
		};
		myChart.setOption(option);  //使用刚指定的配置项和数据显示图表
		window.addEventListener("resize", function () {
			myChart.resize();  //使图表自适应窗口的大小
		});
		//回调函数处理鼠标点击事件并且显示各数据信息内容
		myChart.on('click', function (params) {
			alert("第" + (params.dataIndex + 1) + "件产品:" + params.name + "的" +
				params.seriesName + "为:" + params.value +
				"\n\n 1--componentType:" + params.componentType +
				"\n 2--seriesType:" + params.seriesType +
				"\n 3--seriesIndex:" + params.seriesIndex +
				"\n 4--seriesName:" + params.seriesName +
				"\n 5--name:" + params.name +
				"\n 6--dataIndex:" + params.dataIndex +
				"\n 7--data:" + params.datax +
				"\n 8--dataType:" + params.dataType +
				"\n 9--value:" + params.value +
				"\n 10--color:" + params.color);
		});
		myChart.on('legendselectchanged', function (params) {
			//获取点击图例的选中状态
			var isSelected = params.selected[params.name];
			//在控制台中打印
			console.log((isSelected ? '你选中了' : '你取消选中了') + '图例:' + params.name);
			//打印所有图例的状态
			console.log(params.selected);
		});
	</script>
</body>

</html>